<template>
    <el-aside class="treeAside" :width="isShrink ? asideOptions.width : '36px'">
        <slot name="header">
            <div class="treeAside-header" v-if="isDefaultShowHeader">
                <div v-if="isShrink" class="header-div">
                    <span class="header-title"> {{ asideOptions.title }}</span>
                    <slot name="button"></slot>
                </div>
                <template v-if="showShrink">
                    <i class="el-icon-arrow-left" v-if="isShrink"
                       @click="shrinkClick" />
                    <i class="el-icon-arrow-right" v-else @click="shrinkClick"></i>
                </template>
            </div>
            <div v-if="isShrink && treeOptions.isSearch" style="padding: 6px 6px;">
                <el-input v-model="filterText" placeholder="输入关键字进行搜索" />
            </div>
        </slot>
        <template v-if="isShrink">
            <slot name="main">
                <vTreeEdit ref="tree" :options="treeOptions" :treeData="treeData"
                           :default-expanded-keys="defaultExpandedKeys"
                           :default-checked-keys="defaultCheckedKeys"
                           :current-node-key="currentNodeKey"
                           @event="handleTreeEvent" />
            </slot>
        </template>
    </el-aside>
</template>
<script>
export default {
    name: "vAside",
    props: {
        options: {
            //操作按钮组
            type: Object,
            default() {
                return {};
            },
        },
        treeOptions: {
            //树配置
            type: Object,
            default() {
                return {};
            },
        },
        treeData: {
            //树数据
            type: Array,
            default() {
                return [];
            },
        },
        isShowHeader: {
            type: Boolean,
            default: true,
        },
        defaultExpandedKeys: {
            type: Array,
            default() {
                return [];
            },
        },
        defaultCheckedKeys: {
            type: Array,
            default() {
                return [];
            },
        },
        currentNodeKey: {
            type: [String, Number],
            default: null,
        },
        showShrink: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            asideOptions: {},
            defaultOption: {
                title: "",
                width: "200px",
            },
            isShrink: true, //展开收缩标识
            isDefaultShowHeader: true,
            filterText: "",//树形搜索
        };
    },
    watch: {
        options: {
            handler() {
                this.initOptions(this.options);
            },
            deep: true,
            immediate: true,
        },
        filterText(val) {
            if (this.treeOptions.ref) {
                if (this.$refs['tree']) {
                    this.$refs['tree'].filterTextSearch(val);
                }
            }
        }
    },
    methods: {
        initOptions(options) {
            this.isDefaultShowHeader = this.isShowHeader;
            this.asideOptions = $.extend({}, this.defaultOptions, options);
        },
        shrinkClick() {
            this.isShrink = !this.isShrink;
        },
        handleTreeEvent(event) {
            // console.log("event", event);
            this.$emit("event", event);
        },
        clearSearchText() {
            this.filterText = "";
        }
    },
};
</script>
